<template>
    <div>
        <div style="box-shadow: 0 0 5px rgb(220, 220, 220);">
            <div class="top_look">
                <p>用户名:<el-input v-model="username" style="width: 150px" placeholder="用户名" /></p>
                <p>商品名:<el-input v-model="names" style="width: 150px" placeholder="商品名" /></p>
                <p>电话:<el-input v-model="tel" style="width: 150px" placeholder="电话" /></p>
                <p>价格:<el-input v-model="address" style="width: 150px" placeholder="地址" /></p>
            </div>
            <div class="but">
                <div>
                    <el-button type="success" @click="gettype('配送单')">配送单</el-button>
                    <el-button type="primary" @click="gettype('自提单')">自提单</el-button>
                    <el-button @click="getlist()"><el-icon>
                            <RefreshLeft />
                        </el-icon></el-button>

                </div>
                <div>
                    <el-button :icon="CircleClose" size="large" @click="outlook()">取消</el-button>
                    <el-button type="primary" :icon="Search" size="large">搜索订单数据</el-button>
                </div>

            </div>
        </div>
        <el-table :data="tableData" style="width: 100%" :default-sort="{ prop: 'date', order: 'ascending' }">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="data" label="时间" sortable width="100">
                <template v-slot="scope">
                    {{ formatDate(scope.row.data) }}
                </template>
            </el-table-column>
            <el-table-column prop="names" label="商品" width="100" />
            <el-table-column prop="username" label="客户名" width="100" />
            <el-table-column prop="tel" label="电话" show-overflow-tooltip width="120" />
            <el-table-column prop="imgs" label="商品图片">
                <template v-slot="scope">
                    <img :src="scope.row.imgs" alt="" style="width: 0.4rem;">
                </template>
            </el-table-column>
            <el-table-column prop='prince' label="价格" sortable />
            <el-table-column prop="address" label="地址" show-overflow-tooltip width="150" />
            <el-table-column prop='deliver' label="配送方式" />
            <el-table-column prop="num" label="数量" show-overflow-tooltip sortable />
            <el-table-column prop="invoce" label="发票" show-overflow-tooltip />
            <el-table-column prop="wgt" label="重量/克" show-overflow-tooltip sortable width="100" />
            <el-table-column prop="coupon" label="抵值券" show-overflow-tooltip sortable width="90" />
            <el-table-column prop="integral" label="金叶子" show-overflow-tooltip sortable width="90" />
            <el-table-column label="总付款" width="150" fixed="right" sortable>
                <template v-slot="scope">
                    <!-- 取后三位 -->
                    {{ (scope.row.prince * scope.row.num %
                        (scope.row.integral % 100) + (scope.row.wgt * 100) -
                        scope.row.coupon).toFixed(2) }}
                </template>
            </el-table-column>
        </el-table>

        <div class="demo-pagination-block">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[4, 5, 6, 7]"
                :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
                :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
    </div>
</template>
 
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { get_order_list } from '@/request/api/api'
import { Search, CircleClose, RefreshLeft } from '@element-plus/icons-vue'

const username = ref<string>('')//用户名
const names = ref<string>('')//商品名
const tel = ref<number>()//手机号
const address = ref<string>('')//商品价格


onMounted(() => {
    getlist()
})

//获取数据
const tableData = ref([])
const getlist = async () => {
    const res = await get_order_list({
        username: username.value,
        names: names.value,
        tel: tel.value,
        address: address.value,
        currentPage: currentPage.value,
        pageSize: pageSize.value,
        type:'待发货',
        deliver: deliver.value
    })
    tableData.value = res.list
    total.value = res.total

}
//筛选订单
const deliver = ref<string>('')
const gettype = (val: string) => {
    deliver.value = val
    getlist()
}

//取消搜索
const outlook = () => {
    username.value = ''
    names.value = ''
    tel.value = undefined
    address.value = ''
    getlist()
}


const currentPage = ref(1) //当前页
const pageSize = ref(6) //每页显示条数
const background = ref(false)//是否为分页按钮添加背景色
const disabled = ref(false)//是否禁用分页
const total = ref()//总条数

const handleSizeChange = (val: number) => {
    // console.log(`${val} items per page`)//每页显示条数
    pageSize.value = val
    getlist()
}
const handleCurrentChange = (val: number) => {
    // console.log(`current page: ${val}`)//当前页
    currentPage.value = val
    getlist()
}


//时间格式转化
function formatDate(dateString) {
    const date = new Date(dateString);
    return date.toLocaleString(); // 或者使用其他格式化方法
}
</script>

<style >
.el-table .warning-row {
    --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
    background-color: rgb(233, 255, 245);
}

.el-table .drangers-row {
    background-color: rgb(255, 234, 234);
    color: rgb(120, 121, 121)
}

.el-table .primary-row {
    background-color: rgb(232, 242, 255);
    color: rgb(120, 121, 121)
}

.el-table .warning-row {
    background-color: rgb(255, 248, 232);
    color: rgb(120, 121, 121)
}

.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block {
    display: flex;
    justify-content: center;
    margin-top: 0.2rem;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}

.top_look {
    display: flex;
    justify-content: space-around;
    align-items: center;
    /* flex-wrap: wrap; */
}

.top_look p {
    margin: 0.15rem;
}

.but {
    display: flex;
    justify-content: space-between;
    padding: 0.1rem 0.4rem;
    margin-bottom: 0.1rem;
}
</style>